<template>
  <div class="doctor">
    <div class="d-cont d-cont1">
      <div class="d-img">
        <img :src="doctorPng" alt="" srcset="" />
      </div>

      <!-- 没有过期，可以跳小程序 -->
      <div v-if="qrData.expires === 0" class="d-call">
        <div class="btn" @click="callVideoDoctor">
          <div class="d-c-img"><img :src="require('@/static/service/phone.png')" alt="" srcset="" /></div>
          <div class="d-c-txt">呼叫医生</div>
        </div>
      </div>
      <div v-if="qrData.expires === 0" class="d-txt">
        <span class="d-tip">提醒</span>
        视频医生将由专业的医生集团提供服务，进入呼叫页面即表示您已同意授权合作方获取并使用您的个人信息。
      </div>
      <div v-if="qrData.expires === 1 || qrData.expires === null" class="d-over">
        <div>您暂无服务或服务已过期</div>
        <div class="btn" @click="goServiceList">购买服务</div>
      </div>
    </div>
    <!-- 授权 -->
    <div v-if="authAddBtnVisible" class="d-cont d-cont2">
      <div class="d-auth">
        <div class="a-title">您的视频医生服务可共享给其他家庭成员使用。请选择:</div>
        <div class="a-user">
          <div v-for="(user, index) in authUserList" :key="index" class="a-item">
            <div class="a-head">
              <img :src="user.src" :alt="user.relationName" srcset="" />
              <span class="a-h-bq">{{ user.relationName }}</span>
            </div>
            <div class="a-name">
              {{ user.name }}
            </div>
          </div>
          <div class="a-item">
            <div class="a-add" @click="authAddUser">
              <img :src="addPng" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 家庭成员面板 -->
    <!-- <div v-if="familyPanelVisible" class="family-panel">
      <div class="f-mask"></div>
      <div class="f-cont">
        <img :src="closePng" class="pf-close" mode="aspectFit" @click="closeFamilyPanelByClose" />
        <checkbox-group @change="familyCheckboxChange">
          <div v-for="(item, index) in familyList" :key="index" class="f-item">
            <checkbox :value="item.insuredId + ',' + item.relation" />
            <img :src="item.src" :alt="item.insuredName" srcset="" class="f-i-img" />
            <span class="f-i-name">{{ item.insuredName }} </span>
            <span class="f-i-relation">{{ item.relationName }}</span>
          </div>
        </checkbox-group>
        <div class="f-btn-w">
          <view class="f-btn" @click="createNewUser"> 新建 </view>
          <view class="f-btn f-btn-orange" @click="submitFamilySelected"> 确定 </view>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import doctorPng from '../images/doctor.png';
import rCrossPng from '../images/icons/r-coss.png';

import { getInservice, getAuthMedicOrderInfo } from '@/api/videoDoctor.js';
import { getFamilyData, getMedicOrderInfo } from '@/api/service.js';
import { commonProjectType } from '@/common/baseUrl.js';
import { tongji } from '@/utils/tools.js';
export default {
  data() {
    return {
      doctorPng,
      addPng: rCrossPng,
      patientId: wx.getStorageSync('patientid'), // 默认使用当前登录人的patientId
      qrData: {},
      authAddBtnVisible: false, // 是否显示授权添加按钮
      authUserList: [], // 授权人
      // familyPanelVisible: false, // 是否显示家庭面板
      userInfo: {},
      familyList: [],
      closePng:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/error.png',
      selectedFamilyData: []
    };
  },
  onLoad(option) {
    if (option && option.patientId) {
      this.patientId = option.patientId;
    }
    // 再添加一次路由，这样当点击返回按钮，返回全部服务的时候，不会出现其他页面
    // this.$wxPromise.navigateTo({
    //   url: `/pagesC/videoDoctor/index`
    // });
    let appSource = uni.getStorageSync('appSource');
    // 从公众号进入
    if (appSource === 'officialAccount') {
      tongji('24b2401a-aaad-4a0f-94d8-fc216c6609b7');
    }
  },

  // 该页面，点右上角，同意返回到全部服务页面

  onShow() {
    this.init();
  },
  methods: {
    init() {
      // 获取头像
      this.userInfo = (wx.getStorageSync('rawData') && JSON.parse(wx.getStorageSync('rawData'))) || {};
      // console.log('patientId:', this.patientId);
      // 获取用户的会员服务
      getInservice(this.patientId).then((res) => {
        if (res.code === 0) {
          let insuranceList = res.data || [];

          insuranceList = insuranceList.filter((item) => {
            return item.projectType === commonProjectType;
          });

          // 有视频产品，且服务订单状态为服务中
          let hasVideoService = insuranceList.find((i) =>
            i.products && i.products.length
              ? i.products.find((j) => j.insuranceProductType === 4) && i.orderStatus === 3
              : false
          );
          console.log('hasVideoService:', hasVideoService);
          if (hasVideoService) {
            this.getWxCode();
          } else {
            this.qrData = {
              expires: 1
            };
            // 存在，服务订单为待激活的含有视频产品的服务订单
            // let hasBeActiveVideoService = insuranceList.find((i) =>
            //   i.products && i.products.length
            //     ? i.products.find((j) => j.insuranceProductType === 4) && i.orderStatus === 2
            //     : false
            // );
            // if (hasBeActiveVideoService) {
            //   uni.showModal({
            //     title: '提示',
            //     content: '请激活含有视频医生的服务订单',
            //     confirmText: '前往',
            //     cancelText: '回首页',
            //     success: (res) => {
            //       if (res.confirm) {
            //         uni.navigateTo({
            //           url: '/pages/service/index?patientId=' + this.patientId
            //         });
            //       } else if (res.cancel) {
            //         uni.navigateTo({
            //           url: '/pages/index/index'
            //         });
            //       }
            //     }
            //   });
            // } else {
            //   this.qrData = {
            //     expires: 1
            //   };
            // }
          }
        } else {
          uni.showToast({
            title: '查询用户服务订单失败'
          });
        }
      });
      // 获取用户和缓医生订单信息
      // this.getWxCode();
      // 获取视频医生授权信息
      getAuthMedicOrderInfo(this.patientId).then((res) => {
        if (res.code === 0) {
          // 如果存在patientId 则表示用户可以继续授权
          if (res.data && res.data.patientId) {
            this.authAddBtnVisible = true;
            this.authUserList = [{ relation: 1, name: res.data.name }].concat(res.data.users);
            this.authUserList.forEach((item) => {
              // 本人使用微信头像
              if (item.relation === 1) {
                item.src = this.userInfo.avatarUrl;
              }
              if (item.sex === 1) {
                // 只有父母和子女需要区分性别
                if (item.relation === 3) {
                  item.src =
                    'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/father.png';
                } else if (item.relation === 4) {
                  item.src =
                    'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/son.png';
                } else if (item.relation === 2) {
                  item.src =
                    'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/man.png';
                }
              } else {
                if (item.relation === 3) {
                  item.src =
                    'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/mother.png';
                } else if (item.relation === 4) {
                  item.src =
                    'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/der.png';
                } else if (item.relation === 2) {
                  item.src =
                    'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/woman.png';
                }
              }

              // 设置标签名称

              switch (item.relation) {
                case 1:
                  item.relationName = '本人';
                  break;
                case 2:
                  item.relationName = '配偶';
                  break;
                case 3:
                  item.relationName = '父母';
                  break;
                case 4:
                  item.relationName = '子女';
                  break;
                default:
                  item.relationName = '本人';
                  item.src = this.userInfo.avatarUrl;
              }
            });
            console.log('this.authUserList:', this.authUserList);
          } else {
            this.authAddBtnVisible = false;
          }
        } else {
          uni.showToast({
            title: '获取用户家庭卡授权报错'
          });
        }
      });
      // 获取当前用户的家庭成员
      getFamilyData(this.patientId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({ title: '获取用户关系列表失败' });
          return;
        }
        this.familyList = res.data;
        this.familyList.forEach((item) => {
          item.insuredId = item.memberId;
          item.insuredName = item.memberName;

          switch (item.relation) {
            case 1:
              item.relationName = '本人';
              break;
            case 2:
              item.relationName = '配偶';
              break;
            case 3:
              item.relationName = '父母';
              break;
            case 4:
              item.relationName = '子女';
              break;
            default:
              item.relationName = '本人';
          }

          // sex 1男  0为女
          if (item.sex === 1) {
            // 只有父母和子女需要区分性别
            if (item.relation === 3) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/father.png';
            } else if (item.relation === 4) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/son.png';
            } else {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/man.png';
            }
          } else {
            if (item.relation === 3) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/mother.png';
            } else if (item.relation === 4) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/der.png';
            } else {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/woman.png';
            }
          }
        });
      });
    },
    getWxCode() {
      // 获取用户和缓医生订单信息
      getMedicOrderInfo(this.patientId)
        .then((res) => {
          if (res.code === 0) {
            // console.log('res:', res.data);
            this.qrData = res.data;
          } else {
            uni.showModal({
              title: '提示',
              content: res.message
            });
            this.qrData.expires = 1;
          }
        })
        .catch((e) => {
          this.qrData.expires = 1;
        });
    },
    callVideoDoctor() {
      // 跳转第三方下程序
      let qrData = this.qrData;
      wx.navigateToMiniProgram({
        appId: 'wx15e414719996d59f',
        path: `pages/room/room?profileName=${
          qrData.profileType && qrData.profileType.toLowerCase()
        }&subDomain=mp&dept=600002&sdkProductId=${qrData.sdkProductId}&userToken=${
          qrData.userToken
        }&openId=${wx.getStorageSync('openid')}`,
        success(res) {
          // 打开成功
          console.log('小程序打开成功 res:', res);
        },
        complete(res) {
          console.log('callVideoDoctor res:', res);
        }
      });
      tongji('b53265c3-bd91-43cd-9008-ea59e58dae49');
    },
    goServiceList() {
      // 跳转到服务列表页
      uni.navigateTo({
        url: '/pagesC/service/index?patientId=' + this.patientId
      });
      tongji('78f70902-3392-4e4c-b7cf-1eff0e230049');
    },
    // createNewUser() {
    //   // this.familyPanelVisible = false;
    //   this.$wxPromise.navigateTo({
    //     url: '/pagesC/familyMember/index?patientId=' + this.patientId
    //   });
    // },
    authAddUser() {
      // 授权新的家庭成员
      // this.familyPanelVisible = true;
      // if (this.familyList.length > 0) {
      //   // 有家庭成员，则显示家庭成员面板
      //   this.familyPanelVisible = true;
      // } else {
      //   this.createNewUser();
      // }
      this.$wxPromise.navigateTo({
        url: '/pagesC/familyMember/index?patientId=' + this.patientId + '&maxLen=1&from=doctorVideo'
      });
    }
    // closeFamilyPanelByClose() {
    //   this.familyPanelVisible = false;
    // },
    // familyCheckboxChange(e) {
    //   this.selectedFamilyData = e.detail.value;
    // }
    // submitFamilySelected() {
    //   // 提交授权的用户
    //   let selectFamilyData = this.selectedFamilyData[0].split(',');
    //   let postData = {
    //     toUserId: selectFamilyData[0],
    //     relation: selectFamilyData[1]
    //   };
    //   postAuthMedicOrder(this.patientId, postData).then((res) => {
    //     if (res.code === 0) {
    //       uni.showToast({
    //         title: '授权成功'
    //       });
    //       this.closeFamilyPanelByClose();
    //       this.init();
    //     } else {
    //       uni.showToast({
    //         title: res.message || '授权失败，请联系管理员'
    //       });
    //     }
    //   });
    // }
  }
};
</script>
<style lang="scss" scoped>
.doctor {
  .d-cont {
    background: white;
    width: 700rpx;
    margin: auto;
    border-radius: 24rpx;
    margin-top: 24rpx;
    box-sizing: border-box;
    overflow: hidden;
  }
  .d-cont1 {
    padding-bottom: 56rpx;
    .d-img {
      width: 100%;
      img {
        width: 100%;
        height: 200px;
      }
    }
    .d-txt {
      width: 90%;
      color: rgba(0, 0, 0, 0.7);
      font-size: 14px;
      text-align: left;
      margin: auto;
      margin-top: 20rpx;

      .d-tip {
        text-align: center;
        background: #f34e1c;
        padding: 0px 5px;
        color: white;
        margin-right: 5px;
      }
    }
    .d-call {
      width: 268rpx;
      height: 268rpx;
      border-radius: 100%;
      box-sizing: border-box;
      border: 1px solid rgba(243, 78, 28, 0.3);
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 56rpx;

      .btn {
        width: 244rpx;
        height: 244rpx;
        border: 1px solid rgba(0, 0, 0, 0);
        background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
        border-radius: 50%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: auto;
        .d-c-img {
          width: 62rpx;
          height: 62rpx;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .d-c-txt {
          margin-top: 24rpx;
          font-size: 40rpx;
          font-weight: 500;
          color: #ffffff;
        }
      }
    }
    .d-over {
      width: 100%;
      text-align: center;
      margin-top: 28rpx;
      color: #b2b2b2;
      color: black;
      .d-link {
        font-weight: bold;
        text-decoration: underline;
        cursor: pointer;
        color: #2680eb;
        margin-top: 8rpx;
      }
      .btn {
        width: 328rpx;
        border-radius: 44rpx;
        background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
        padding: 14rpx 0;
        margin: 40rpx auto 10rpx;
        font-size: 36rpx;
        color: #ffffff;
        text-align: center;
      }
    }
  }

  .d-cont2 {
    padding: 48rpx 40rpx;
    margin-bottom: 40rpx;
    .d-auth {
      .a-title {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
      }
      .a-user {
        margin-top: 32rpx;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        // overflow-x: scroll;
        // overflow-y: hidden;
        .a-item {
          width: 25%;
          position: relative;
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-bottom: 40rpx;
          .a-head {
            width: 96rpx;
            height: 96rpx;
            background: white;
            border-radius: 96rpx;
            padding: 8rpx;
            box-sizing: border-box;
            overflow: visible;
            position: relative;
            flex-shrink: 0;

            img {
              width: 100%;
              height: 100%;
              border-radius: inherit;
            }
          }
          .a-head {
            background: #fee9e9;
            position: relative;
            .a-h-bq {
              transform: translateX(-50%);
              width: 80rpx;
              height: 32rpx;
              text-align: center;
              background: #ef3931;
              color: white;
              border-radius: 32rpx;
              font-size: 24rpx;
              display: inline-block;
              position: absolute;
              left: 50%;
              bottom: 0;
            }
          }
          .a-name {
            margin-top: 10rpx;
            text-align: center;
            color: rgba(0, 0, 0, 0.55);
            font-size: 32rpx;
            font-weight: 500;
          }
        }
        .a-add {
          background: #e8e8e8;
          width: 96rpx;
          height: 96rpx;
          border-radius: 96rpx;
          padding: 8rpx;
          box-sizing: border-box;
          overflow: visible;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          border: 1px solid #f34e1c;
          img {
            width: 60%;
            height: 60%;
          }
        }
      }
    }
  }
  .family-panel {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    top: 0px;
    left: 0px;
    overflow: scroll;
    background: rgba(0, 0, 0, 0.7);
    .f-mask {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .f-cont {
      height: 80%;
      position: absolute;
      top: calc(50% + 42rpx); // 12rpx为高度的一般
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      width: 650rpx;
      padding: 120rpx 40rpx 32rpx;
      box-sizing: border-box;
      background: #f4f4f4;
      border-radius: 24rpx;
      // height: calc(100% - 124rpx);
      // padding-bottom:144rpx;
      .pf-close {
        position: absolute;
        width: 48rpx;
        height: 48rpx;
        top: 12px;
        right: 12px;
      }
      .f-item {
        width: 600rpx;
        height: 160rpx;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        background: white;
        margin-top: 24rpx;
        padding: 24rpx;
        box-sizing: border-box;
        .f-i-img {
          margin-left: 28rpx;
          width: 96rpx;
          height: 96rpx;
          border-radius: 96rpx;
          background: #eee;
        }
        .f-i-name {
          margin-left: 28rpx;
          font-size: 40rpx;
        }
        .f-i-relation {
          width: 72rpx;
          height: 36rpx;
          margin-left: 28rpx;
          background: #fee9e9;
          border-top-right-radius: 36rpx;
          border-top-left-radius: 36rpx;
          border-bottom-right-radius: 36rpx;
          text-align: center;
          line-height: 36rpx;
          font-size: 24rpx;
        }
      }

      .f-btn-w {
        margin-top: 28rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .f-btn {
          width: 240rpx;
          height: 72rpx;
          line-height: 72rpx;
          background: linear-gradient(to left, #10aeff 0%, #2680eb 100%);

          border-radius: 36rpx;
          color: #fff;
          font-size: 32rpx;
          text-align: center;
          margin: 20rpx auto;
          &.f-btn-orange {
            background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
          }
        }
      }
    }
  }
}
</style>
